<script setup>
import { defineProps ,ref , onMounted,reactive,watch} from 'vue';
import movieList from './movieList.vue';
const props = defineProps() 
import { useRoute,useRouter } from 'vue-router';
import {getCateList} from '@/api/cate'
import { useStore } from '@/stores/home'


// 点击展开
let isUpfold = ref(false)
let upfoldHandler = () => {
    isUpfold.value = !isUpfold.value
}


const router = useRouter()
const route = useRoute()
const homeStore = useStore()
homeStore.updateMenuList()

let loading = ref(false)


let cateList = ref([])
let cateConfig =reactive({
    path:route.query.path,
    page:route.query.page || 1, // 当前页数
    count:0, // 当前分类总数据有多少条
    page_count:0, // 当前分类总页数
    cateTitle:route.query.title,
    pageSize:0,// 每页多少条
})

let asyncGetCateList = async (path,page=0) => {
    loading.value = true
    let {data:res} = await getCateList(path,page)
    loading.value = false
    // console.log('分类下面的数据',res);
    if(res.code == 200) {
       cateList.value = res.data.list 
       cateConfig.count = res.data.count
       cateConfig.page_count = res.data.page_count
       cateConfig.pageSize = res.data.one_page_count
    }
}

// 分页改变触发
let changePagination = (current) => {
    let page = current
    cateConfig.page = page
    router.push('/cate?path='+cateConfig.path+'&page='+page+'&title=' + cateConfig.cateTitle)
}

watch(() => route.query,(newVal,oldVal) => {
    cateConfig.path = newVal.path
    cateConfig.cateTitle = newVal.title
    asyncGetCateList(cateConfig.path,cateConfig.page)
})

onMounted(() => {
    asyncGetCateList(cateConfig.path,cateConfig.page)
})


</script>

<template>
    <div class="cate-query-container">
        <div :class="[isUpfold ? 'cate-query-content-active' : '']" class="cate-query-content">
            <div class="cate-row">
                <div class="row-left">
                    <p>{{ cateConfig.cateTitle }}</p>
                </div>
                <div class="row-right">
                    <p @click="upfoldHandler">展开</p>
                </div>
                <!-- 展开卡片 -->
                <div :class="[isUpfold?'upfold-row-active' : '']" class="unfold-row">
                    <li>类型</li>
                    <li>年份</li>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="cate-list">
            <a-spin v-if="loading" style="width: 100%;min-height: 300px;display: flex;align-items: center;justify-content: center;" tip="请稍等，正在为您加载中..."></a-spin>
            <movie-list v-show="!loading" :movie-list="cateList" :cateTitle="cateConfig.cateTitle"></movie-list>   
            <a-pagination class="cate-pagetion" :current="cateConfig.page" @change="changePagination" :total="cateConfig.count" :page-size="cateConfig.pageSize" show-total/>
        </div>
    </div>
</template>


<style lang="less" scoped>
.cate-query-container {
    width: 100%;
    .cate-query-content {
        width: 1300px;
        max-width: 100%;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 12px 12px 0px 0px;
        box-sizing: border-box;
        box-shadow: 0px -1px 10px 1px #e7e7e7;
        transition: .3s all;
        overflow: hidden;
        .cate-row {
            padding: 4px 10px;
            box-sizing: border-box;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 48px;
            .row-left {
                font-weight: bolder;
                font-size: 16px;
            }
            .row-right {
                cursor: pointer;
                transition: .3s all;
                &:hover {
                    color: coral;
                }
            }
        }
        .unfold-row {
            transition: .3s all;
            padding: 4px 10px;
            box-sizing: border-box;
            position: absolute;
            top: 0px;
            z-index: -1;
            left: 0px;
            width: 100%;
            border-radius:0px 0px 12px 12px;
            background: #ffffff;
            // box-shadow: 0px 0px 10px 1px #eee;
        }
        .upfold-row-active {
            top: 48px;
            z-index: 1;
        }
    }
    .cate-query-content-active {
            overflow: visible ;
        }
}

.cate-pagetion {
    display: block;
    margin: 0 auto;
    text-align: center;
}
</style>